<template>
  <div>
    <el-tabs v-model="activeName" style="width: 651px">
      <el-tab-pane label="基本设置"  name="first">
        <el-form ref="form"  :rules="rules"  :model="step" label-width="150px">
          <el-form-item label="步骤名称" prop="name">
            <el-input v-model="step.name" placeholder="请输入步骤名称"></el-input>
          </el-form-item >
          <el-form-item label="来源字段">
            <el-select v-model="step.valueField" >
              <el-option v-for="item in step.availableFields" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="字段内容">
          <el-radio-group v-model="fieldType">
            <el-radio :label="1">数据</el-radio>
            <el-radio :label="2">文件名</el-radio>
            <el-radio :label="3">URL</el-radio>
          </el-radio-group>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="输出设置" name="second">
        <el-form ref="form2" label-width="150px">
          <el-row type="flex" justify="end" style="margin-bottom: 10px">
            <el-col :span="5">
              <el-button icon="plus" @click="addOutPut">添加输出</el-button>
            </el-col>
          </el-row>
          <el-table :data="step.fields" stripe border :max-height="250">
            <el-table-column type="index" :width="37"></el-table-column>
            <el-table-column label="名称" :width="120">
              <template scope="scope">
                  <el-input v-model="scope.row.name" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="路径" :width="200">
              <template scope="scope">
                <el-input v-model="scope.row.path" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="类型" :width="180">
              <template scope="scope">
                <div>
                  <el-select v-model="scope.row.type" size="mini">
                    <el-option v-for="item in inputType" :value="item"></el-option>
                  </el-select>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="长度" :width="80">
              <template scope="scope">
                <el-input v-model="scope.row.length" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="精度" :width="80">
              <template scope="scope">
                <el-input v-model="scope.row.precision" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="空格处理" :width="120">
              <template scope="scope">
                  <el-select v-model="scope.row.trim_type" size="mini">
                    <el-option value="none"></el-option>
                    <el-option value="both"></el-option>
                  </el-select>
              </template>
            </el-table-column>
            <el-table-column label="控制" :width="80">
              <template scope="scope">
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row,step.fields)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
  import {Steps, Fields,Options} from "../../model/DataModel";
  import StepCommon from "./mixins/StepMixin";

  export default{
    mixins: [StepCommon],
    watch:{
        'fieldType'(newVal){
            if(newVal == 2){
              this.step.isAFile = 'Y';
              this.step.readurl = 'N';
            }else if(newVal == 3){
              this.step.isAFile = 'N';
              this.step.readurl = 'Y';
            }else{
              this.step.isAFile = 'N';
              this.step.readurl = 'N';
            }
        }
    },
    mounted(){
      let isAFile = this.step.isAFile == 'Y',isAUrl = this.step.readurl == 'Y';
      if(!(isAFile&&isAUrl)) this.fieldType = 1;
      if(isAFile) this.fieldType = 2;
      if(isAUrl) this.fieldType  = 3;
    },
    data(){
      return {
        activeName: "first",
        step: Steps.JsonInput(),
        fieldType:-1,
        inputType:Options.inputTypes
      }
    },
    methods: {
      addOutPut(){
        this.step.fields.push(Fields.JsonInput());
      },
      updateFields(){
        let fields=this.step.fields;
        if(fields.length>0) {
          this.step.outputFields = fields.map((el)=>{
              return el.name
          }).filter(el => el != "");
        }
      }
    }
  }
</script>
